<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model 实例</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
    <style>
        textarea{
            resize:none;
        }
    </style>
</head>
<body>koik 
    <h1>v-model 数据源实例</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{ message }}</p>
        <h2>1、文本域</h2>
        <hr>
        <textarea name="msg" id="msg" cols="35" rows="5" v-model="message"></textarea>
        <h2>2、多选按钮绑定一个值</h2>
        <hr>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{ isTrue }}</label>
        <h2>3、多选绑定一个数组</h2>
        <hr>
        <input type="checkbox" id="xiaoming" value="xiaoming" v-model="studentsArr">
        <label for="xiaoming">xiaoming</label><br>
        <input type="checkbox" id="xiaoli" value="xiaoli" v-model="studentsArr">
        <label for="xiaoli">xiaoli</label><br>
        <input type="checkbox" id="huahua" value="huahua" v-model="studentsArr">
        <label for="huahua">huahua</label><br>
        {{ studentsArr }}
        <h2>4、单选按钮绑定数据</h2>
        <input type="radio" name="sex" id="man" value="男" v-model="sex">
        <label for="man">男</label><br>
        <input type="radio" name="sex" id="girl" value="女" v-model="sex">
        <label for="girl">女</label><br>
        <input type="radio" name="sex" id="big" value="big" v-model="sex">
        <label for="big">big</label><br>
        {{ sex }}
        <input type="range" min="1" max="100" v-model="range">{{ range }}
        <input type="date" min="1" max="100" v-model="date">{{ date }}
        <div>
            <br>
            <br>
            <br>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello world",
                isTrue:true,
                studentsArr:[],
                sex:"男",
                range:"",
                date:""
            },
            methods:{
            }
        });
    </script>
</body>
</html>